import React, { PureComponent } from 'react';
// 引入框架
import { message, Button } from 'antd';
// 引入请求
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website';
// 引入样式
import './kinglife.scss'
// 引入点击复制到粘贴板的办法
import copy from 'copy-to-clipboard';
export default class Kinglife extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 显示
      isTrue: false,
      // 文件列表
      ImgAll: [],
      // 网址列表
      urlAll: []
    }
  }
  componentDidMount () {
    const _this = this;
    if (sessionStorage.getItem('password')) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/King", { password: sessionStorage.getItem('password') }).then(err => {
        if (err.data.code === 'K0001') {
          // 密码正确显示页面
          _this.setState({
            isTrue: true
          }, () => {
            // 获取图片
            _this.updateImg()
            // 获取url
            _this.updateUrl()
          })
        } else {
          // 没有密码就返回管理员页面
          this.props.history.replace('/king');
        }
      }).catch(() => {
        // 没有网络连接就返回管理员页面
        this.props.history.replace('/king');
      })
    } else {
      // 没有密码就返回管理员页面
      this.props.history.replace('/king');
    }
  }
  // 获取服务器中的所有用户上传的图片
  updateImg = () => {
    const _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/cloneImgAll").then(err => {
      if (err.data.code === 'I0001') {
        _this.setState({
          // 把获取到的图片赋值给页面
          ImgAll: err.data.All
        })
      }
    }).catch(() => {
      // 没有网络连接就返回管理员页面
      message.info({ content: '网络错误', className: 'bulletChatMessage' })
    })
  }
  // 获取服务器中所有的上传网址
  updateUrl = () => {
    const _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/cloneUrlAll").then(err => {
      if (err.data.code === 'I0001') {
        _this.setState({
          // 把获取到的url给页面
          urlAll: err.data.All
        })
      }
    }).catch(() => {
      // 没有网络连接就返回管理员页面
      message.info({ content: '网络错误', className: 'bulletChatMessage' })
    })
  }
  // 复制图片路径
  BtnCopy = (list) => {
    if (copy(list)) {
      message.success({ content: '网址已复制到粘贴板', className: 'bulletChatMessage' });
    } else {
      message.error({ content: '您的设备不支持自动复制', className: 'bulletChatMessage' });
    }
  }
  // 删除图片
  deleteBtn = (list) => {
    // 剪切出图片名字
    let name = list.substring(list.indexOf('image'));
    const _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/deleteImg", { list: name }).then(err => {
      if (err.data.code === 'D0001') {
        message.success({ content: '删除成功', className: 'bulletChatMessage' });
        // 删除成功后重新渲染数据
        _this.updateImg();
      }
    }).catch(() => {
      message.info({ content: '网络错误', className: 'bulletChatMessage' })
    })
  }
  // 删除网址
  deleteUrl = (url) => {
    // 把url发送给后台
    const _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/deleteUrl", { urlid: url }).then(err => {
      if (err.data.code === 'D0001') {
        message.success({ content: '删除成功', className: 'bulletChatMessage' });
        // 删除成功后重新渲染数据
        _this.updateUrl();
      }
    }).catch(() => {
      message.info({ content: '网络错误', className: 'bulletChatMessage' })
    })
  }
  render () {
    let { ImgAll, urlAll } = this.state;
    // 把数组分成两份
    function group (array) {
      let newArray = [];
      let newArrayJI = [];
      let newArrayOU = [];
      for (let index = 0; index < array.length; index++) {
        if (index % 2 === 0) {
          newArrayJI.push(array[index])
        } else {
          newArrayOU.push(array[index])
        }
      }
      newArray.push(newArrayJI)
      newArray.push(newArrayOU)
      return newArray;
    }
    let AllG = group(ImgAll);
    return (
      <div className='kinglife' >
        <div className='kinglife_Img'>
          <span className='kinglife_span'>用户上传的图片</span>
          <ul className='kinglife_Img_body'>
            <li>
              {
                AllG[0].length !== 0 ?
                  AllG[0].map((list, index) => {
                    return (
                      <div key={index}>
                        <img src={list} alt="图片" />
                        <Button onClick={() => this.BtnCopy(list)}>复制地址</Button>
                        <Button type="primary" danger onClick={() => this.deleteBtn(list)}>删除图片</Button>
                      </div>
                    )
                  })
                  : ''
              }
            </li>
            <li>
              {
                AllG[1].length !== 0 ?
                  AllG[1].map((list, index) => {
                    return (
                      <div key={index}>
                        <img src={list} alt="图片" />
                        <Button onClick={() => this.BtnCopy(list)}>复制地址</Button>
                        <Button type="primary" danger onClick={() => this.deleteBtn(list)}>删除图片</Button>
                      </div>
                    )
                  })
                  : ''
              }
            </li>
          </ul>
        </div>
        <div className='kinglife_Img'>
          <span className='kinglife_span'>用户上传的网址</span>
          <ul className='kinglife_ul'>
            {
              urlAll.length !== 0 ?
                urlAll.map((list, index) => {
                  return (
                    <li className='kinglife_li' key={index}>
                      <div className='kinglife_li_left'>
                        <p onClick={() => this.BtnCopy(`${webSite}:3003/url/${list.urlid}`)}>{webSite}:3003/url/{list.urlid}</p>
                        <p onClick={() => this.BtnCopy(list.url)}>{list.url}</p>
                      </div>
                      <div className='kinglife_li_right'>
                        <Button type="primary" danger onClick={() => this.deleteUrl(list.urlid)}>删除</Button>
                      </div>
                    </li>
                  )
                })
                : ''
            }
          </ul>
        </div>
      </div>
    )
  }
}